<script type="text/javascript">
var json = eval({$list});
var arrArea = new Array();
var arrAreaTitle = new Array();
var selected = '{$selectedarea}';

// 初始化
function init(){
	var selectarr = selected.split(',');
	$.each(json, function(i, n) {
		$("#list_0").append(addnode(n));
		if(selectarr[0] == i) {
			$("#node_"+i).attr('class','on');
			arrArea = selectarr;
			arrAreaTitle[0] = n.title;
			$("#select_0").html(n.title);
			$.each( json[i]['child'], function(j,m){
				$("#list_1").append(addnode(m));
				if(selectarr[1]==j){
					$("#node_"+j).attr('class','on');
					arrAreaTitle[1] = m.title;
					$("#select_"+m.level).html(m.title);
				}
			});
		}
	});
};
// 选择下级地区
function selectarea(id, level, title) {
	$("#select_"+level).html(title);
	$("#node_"+arrArea[level]).attr('class', 'noon');
	$("#node_"+id).attr('class', 'on');
	
	arrArea[level] = id;
	arrAreaTitle[level] = title;
	
	level++;
	var jsonchild = json;
	var arrlength = arrArea.length;	
	for(var i = 0; i < arrlength; i++) {
		if(i >= level - 1) {
			arrAreaTitle[level] = null;
			var num = i + 1;
			$("#list_"+num).html('');
			$("#select_"+num).html('');		    	
		}
		if(i < level) {
			jsonchild = jsonchild[arrArea[i]].child;
		}
	}
	arrArea.splice(level);
	arrAreaTitle.splice(level);

	var html = '';
	if(jsonchild) {
		$.each(jsonchild, function(i, n) {
		   		html += addnode(n);
		});
		$("#list_"+level).html(html);
	}
}
// 添加树形分类节点
function addnode(n) {
	return "<li id='node_"+n.id+"'><a href='javascript:void(0);' onclick=selectarea("+n.id+","+n.level+",\'"+n.title+"\') >"+n.title+"</a></li>";
}
// 保存地区路径
function save() {
	if(arrArea.length == 0) {
		alert(L('PUBLIC_SELECT_PLACE'));
	} else {
		parent.$('#current').val(arrArea);
		parent.$('#selectarea').val(arrAreaTitle.join(' '));
		ui.box.close();
	}
}
// 初始化地区列表
init();
</script>

<dl class="pop-select-city">
	<dt>
		<ul class="ullist" id="list_0">
		</ul>
	</dt>
	<dd class="bd-hvt">
		<ul class="ullist" id="list_1">    
		</ul>
	</dd>
	<dd class="bd-hvt">
		<ul class="ullist" id="list_2">    
		</ul>
	</dd>
	<dd style="color:red" id="selectmessage">
		<span id="select_0"></span>
		<span id="select_1"></span>
		<span id="select_2"></span>&nbsp;
	</dd>
	<dd style="text-align:center">
		<input type="button" class="btn_b" value="{:L('PUBLIC_CONFIRM')}"  onclick="save()"/>
	</dd>
</dl>